<template>
  <div class="app-container">
    <!-- 查询 -->
    <tl-list-search ref="search" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay">
      <template slot="search">
        <el-form-item label="部门名称">
          <el-select style="width:100%" v-model="createdepart" placeholder="请选择部门名称" filterable clearable multiple collapse-tags @change="doQueryConcatCreateDepart">
            <el-option v-for="item in codeModel.deptCommonCodeList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="queryParam.qry_projectname" placeholder="名称或编号" @keyup.enter.native="doQuery"></el-input>
        </el-form-item>
        <el-form-item label="项目级别">
          <el-select v-model="projectlevel" multiple placeholder="请选择项目级别" style="width:190px" @change="doQueryConcatProjectLevel">
            <el-option v-for="item in codeModel.projectlevelList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目经理">
          <el-input v-model="queryParam.qry_projectmanager" style="width:120px" placeholder="工号或姓名" @keyup.enter.native="doQuery"> </el-input>
        </el-form-item>
        <el-form-item label="系统部支持">
          <el-select v-model="queryParam.qry_needsupport" placeholder="请选择" filterable collapse-tags clearable>
            <el-option v-for="item in codeModel.needsupportList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="进入短名单">
          <el-select v-model="queryParam.qry_intonamelist" placeholder="请选择" filterable collapse-tags clearable>
            <el-option v-for="item in codeModel.intonameList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态">
          <el-select v-model="projectlargestate" placeholder="项目状态" filterable clearable multiple collapse-tags style="width:250px">
            <el-option v-for="item in codeModel.projectlargestateList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
      </template>
      <template slot="button">
        <el-button type="primary" icon="el-icon-zoom-in" @click="openDeatailSearchDialog">详细查询</el-button>
      </template>
      <template slot="button">
        <el-button type="primary" icon="el-icon-zoom-in" @click="resetQuery">重置</el-button>
      </template>
    </tl-list-search>
    <!-- 工具栏 -->
    <tl-list-toolbar ref="toolbar" :refMainTable="$refs.mainTable" currentModuleTableCode="mpmProject/track" :startColumn="2" :isDisplayAdd="true" :isDisplayDeleteBatch="false" @exportExcel="doExportExcel" :isDisplayExport="canWatch" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :disableDeleteBatch="selectedRowKeys.length <= 0" @add="openAddDialog('editForm')">
      <template slot="left-btn">
        <el-button class="filter-item" type="primary" @click.native="openChangeManager()" v-if="isCFOForThisProject">项目经理交接</el-button>
        <!--        <el-button class="filter-item" type="primary" icon="el-icon-download" @click="doExportExcel" v-hasPermission="['sys:excel:export']">导出</el-button>-->
      </template>
    </tl-list-toolbar>
    <div>
      <!-- 列表选择 -->
      <div class="table-alert-div" ref="selector">
        <el-alert type="success" :closable="false" class="tl-table-alert-info" effect="light">
          <template slot="title">
            已选择&nbsp;<a class="tl-table-alert-info-a1">{{ selectedRowKeys.length }}</a
            >项&nbsp;&nbsp;
            <a class="tl-table-alert-info-a2" @click="doClearSelected">全部清空</a>
          </template>
        </el-alert>
      </div>
      <!--表格渲染-->
      <el-table class="tl-table" highlight-current-row ref="mainTable" :style="{ '--tableWidth': tableWidth }" :row-style="tableRowStyle" :height="tableHeight" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" row-key="id" border fit :row-class-name="doChangeRowClassName" @expand-change="expandChange" :expand-row-keys="expands">
        <el-table-column type="expand">
          <template slot-scope="props">
            <tl-customer-task ref="customerTaskForm" :customerTaskList="props.row.customertask" :projectInfo="{ projectcode: props.row.projectcode }" :canWatch="canWatch"></tl-customer-task>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="50px" align="center"></el-table-column>
        <el-table-column prop="deptname" label="部门" width="95px" sortable="custom" sort-by="deptname" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="projectname" label="项目名称" min-width="270px" sortable="custom" sort-by="projectname" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="target" label="项目目标" width="200px" sortable="custom" sort-by="target" align="left" header-align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispprojectlevel" label="项目级别" width="80px" sortable="custom" sort-by="projectlevel" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="projectmanager" label="项目经理" width="80px" sortable="custom" sort-by="projectmanager" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispintonamelist" label="进入短名单" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="demandbegindate" label="需求上报日期" width="105px" sortable="custom" sort-by="demandbegindate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="demandenddate" label="需求截止日期" width="105px" sortable="custom" sort-by="demandenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="bidbegindate" width="100px" sortable="custom" sort-by="bidbegindate" label="挂网日期" align="center" header-align="center" :show-overflow-tooltip="true" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="bidenddate" width="100px" sortable="custom" sort-by="bidenddate" label="开标日期" align="center" header-align="center" :show-overflow-tooltip="true" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="planstartdate" width="120px" sortable="custom" sort-by="planstartdate" label="计划开始日期" align="center" header-align="center" :show-overflow-tooltip="true" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="planenddate" width="120px" sortable="custom" sort-by="planenddate" label="计划结束日期" align="center" header-align="center" :show-overflow-tooltip="true" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="background" label="项目背景" width="240px" sortable="custom" sort-by="background" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="summary" label="总体策划" width="200px" sortable="custom" sort-by="summary" align="left" header-align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="participatemoney" label="项目金额(万元)" width="130px" sortable="custom" sort-by="participatemoney" align="right" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="superviselist" width="180px" label="督办情况" align="left" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div v-if="scope.row.superviselist !== '' && scope.row.superviselist !== undefined">
              <el-row v-for="(item, index) in scope.row.superviselist" :key="index">
                <div class="superviser" @click="openViewDialog('superviseeditForm', item.id)">
                  <span>{{ item.supervisecode }}</span>
                  <el-button class="superviserButton" :type="supervisecolor(item.displiststate)" size="mini" plain>{{ item.displiststate }}</el-button>
                </div>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chanceclue" label="来源编号" width="175px" sortable="custom" sort-by="projectstate" align="left" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-row v-for="(item, index) in scope.row.chanceclueList" :key="index">
              <div class="superviser" style="overflow:hidden;">
                {{ item }}
              </div>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="projectendmoney" label="结项金额(万元)"  width="115px" sortable="custom" sort-by="projectendmoney" align="right" header-align="center" :show-overflow-tooltip="true"> </el-table-column>
        <!-- <el-table-column prop="dispexistbidscore" label="是否存在评分细则" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="sponsor" label="Sponsor" width="75px" sortable="custom" sort-by="sponsor" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="owner" label="Owner" width="75px" sortable="custom" sort-by="owner" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="submitbegindate" label="立项开始时间" width="105px" sortable="custom" sort-by="planstartdate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="submitfinishdate" label="立项结束时间" width="105px" sortable="custom" sort-by="actualenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column prop="appointbegindate" label="任命开始时间" width="105px" sortable="custom" sort-by="actualenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="appointfinishdate" label="任命结束时间" width="105px" sortable="custom" sort-by="actualenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="planbegindate" label="策划开始时间" width="105px" sortable="custom" sort-by="actualenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="planfinishdate" label="策划结束时间" width="105px" sortable="custom" sort-by="actualenddate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overdueprojecttime" label="项目超期时长" width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overdueprojectnum" label="项目超期次数" width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overduemileposttime" label="里程碑及任务超期时长" width="170px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overduemilepostnum" label="里程碑及任务超期次数" width="170px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overduetasktime" label="任务超期时长" width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overduetasknum" label="任务超期次数" width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="clientname" label="客户名称" width="250px" sortable="custom" align="left" header-align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-row v-for="(item, index) in scope.row.customerlist" :key="index">
              <div class="superviser" style="overflow:hidden;">
                {{ item }}
              </div>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="dispprojectstate" label="项目阶段" width="115px" sortable="custom" sort-by="projectstate" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="projectcode" label="项目编号" width="150px" sortable="custom" sort-by="projectcode" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" width="100px" v-slot="scope" fixed="right">
          <el-dropdown trigger="hover">
            <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-edit" @click.native="openEditDialog('editForm', scope.row.id)" :disabled="scope.row.state !== 0 && scope.row.state !== 2">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" :disabled="scope.row.state !== 0 && scope.row.state !== 2" @click.native="doDelete(scope.row.id)">删除</el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" @click.native="openViewDialog('editForm', scope.row.id)">查看 </el-dropdown-item>
              <el-dropdown-item icon="el-icon-check" @click.native="openMarkedDialog('markedRef', scope.row.id)">查看关注者</el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" @click.native="openCommentDialog('comments', scope.row)">查看留言 </el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check" @click.native="projectMark(scope.row.id, '1')" v-if="scope.row.markflag === '0' && canWatch">关注</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-close" @click.native="projectMark(scope.row.id, '2')" v-if="scope.row.markflag === '1' && canWatch">取消关注</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" @click.native="openCommentDialog('insertComment', scope.row)" v-if="canWatch">留言</el-dropdown-item>
              <el-dropdown-item v-if="(scope.row.open === null || scope.row.open !== 1) && (scope.row.projectstate === '2' || scope.row.projectstate === '8') && (whetherpmo || (deptcommcodes !== ',,' && deptcommcodes.indexOf(',' + scope.row.deptcommoncode + ',') !== -1) || user.code === scope.row.projectmanagercode)" icon="el-icon-circle-plus-outline" @click.native="changePermission(scope.row.projectcode)">公开</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.open === 1 && (scope.row.projectstate === '2' || scope.row.projectstate === '8') && (whetherpmo || (deptcommcodes !== ',,' && deptcommcodes.indexOf(',' + scope.row.deptcommoncode + ',') !== -1) || user.code === scope.row.projectmanagercode)" icon="el-icon-remove-outline" @click.native="changePermission(scope.row.projectcode)">取消公开</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>
      </el-table>
      <!-- 列表分页 -->
      <el-row class="pagebar" type="flex" ref="pager" align="bottom">
        <el-col :span="12" style="margin-bottom:5px;">
          <el-tooltip placement="top">
            <div slot="content">项目当前超过项目计划结束日期<br />且还未结项。</div>
            <el-col class="projectStateContext" :offset="0">
              <el-col class="project-over-color" :offset="0"></el-col>
              项目超期
            </el-col>
          </el-tooltip>
          <el-tooltip placement="top">
            <div slot="content">项目当前有一个或多个里程碑<br />超过计划完成日期。</div>
            <el-col class="projectStateContext" :offset="0">
              <el-col class="milepost-over-color" :offset="0"> </el-col>
              里程碑超期
            </el-col>
          </el-tooltip>
          <el-tooltip placement="top"
            ><div slot="content">项目当前有一个或多个审批<br />超期（48小时）未结束。</div>
            <el-col class="projectStateContext third-col" :offset="0">
              <el-col class="flow-over-color" :offset="0"> </el-col>
              流程超期
            </el-col>
          </el-tooltip>
          <el-tooltip placement="top"
            ><div slot="content">项目当前有一个或多个任务<br />超过计划完成日期。</div>
            <el-col class="projectStateContext" :offset="0">
              <el-col class="task-over-color" :offset="0"> </el-col>
              任务超期
            </el-col>
          </el-tooltip>
        </el-col>
        <el-col :span="12">
          <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
        </el-col>
      </el-row>
      <tl-edit ref="editForm" @refresh="doRefresh"></tl-edit>
      <tl-detail-search ref="detailSearch" :codeModel="codeModel" :queryParams.sync="queryParam" :projectlevels.sync="projectlevel" :createDepart.sync="createdepart" @loadData="loadData" :doDisplayState="false" @resetQueryParam="resetQueryForDetailSearch"></tl-detail-search>
    </div>
    <index-comp ref="indexComp" :projectcode="projectcode"></index-comp>
    <comment-history ref="comments"></comment-history>
    <marked-info-comp ref="markedRef"></marked-info-comp>
    <insert-comment source-type="MpmProject" ref="insertComment"></insert-comment>
    <tl-supervise-edit ref="superviseeditForm"></tl-supervise-edit>
    <tl-mpm-project-change-manager ref="projectChangeManager" :showHistory="true"></tl-mpm-project-change-manager>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import { validateNull } from '@tapui/utils/validate'
import tlEdit from './edit'
import tlDetailSearch from '@/views/mpm/mpmProject/DetailSearch'
import IndexComp from '../projectInfo/indexComp'
import markedInfoComp from './markedEdit'
import commentHistory from '../mpmComments/histroy'
import tlCustomerTask from '../mpmCustomerTask/editForSystem'
import insertComment from '../mpmComments/insertComment'
import tlSuperviseEdit from '@/views/mpm/mpmProjectSupervise/editView'
import tlMpmProjectChangeManager from '@/views/mpm/mpmProjectChangeManager/edit'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { filterObjectNull, rmbFormat } from '@tapui/utils/util'
export default {
  name: 'mpmPrpjectTrack',
  mixins: [mixin_list],
  components: { IndexComp, tlEdit, tlDetailSearch, commentHistory, markedInfoComp, tlCustomerTask, insertComment, tlSuperviseEdit, tlMpmProjectChangeManager },
  data() {
    return {
      projectlevelList: [],
      projectlevel: [],
      createdepart: [],
      urlParam: '?',
      description: '项目立项-列表查询',
      urlPrefix: '/mpm/projectpolymerization/',
      url: {
        list: '/mpm/projectpolymerization/listForTrack',
        queryCodeList: '/mpm/projectpolymerization/dataCodeList',
        queryTaskForSystem: '/mpm/projectTask/queryTaskForSystem',
        changeOperateMarkState: '/mpm/project/operateMarkState',
        queryCanWatch: '/mpm/project/queryCanWatch',
        changePermission: '/mpm/projectReview/changePermission',
        isCFO: '/mpm/project/isCFO',
        getProjectChangeManager: '/mpm/projectChangeManager/getProjectChangeManager',
        exportExcel: '/mpm/projectpolymerization/exportTaskDetailExcel'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'MpmProject.ABNORMALSTATE',
        sord: 'desc'
      },
      projectcode: '',
      // 要展开的行
      expands: [],
      tableWidth: '0px',
      canWatch: false,
      whetherpmo: false,
      deptcommcodes: '',
      projectlargestate: ['0', '1'],
      isCFOForThisProject: false
    }
  },
  // 消除因页面跳转导致无法消失的tooltip
  deactivated() {
    const tooltip = document.querySelectorAll('.el-tooltip__popper')
    tooltip.forEach((item) => {
      item.style.display = 'none'
    })
  },
  methods: {
    /** 修改项目是否公开的权限 **/
    changePermission(projectcode) {
      putAction(this.url.changePermission, { projectcode: projectcode }).then((res) => {
        if (res.success) {
          this.$tap.message(res.message, 'success')
        } else {
          this.$tap.alert(res.message, 'warning')
        }
        this.doRefresh()
      })
    },
    /** 打开编辑对话框 */
    openMarkedDialog(editForm, id) {
      this.$refs[editForm].projectId = id
      this.$refs[editForm].visible = true
      let that = this
      setTimeout(() => {
        that.clickRowkey = id
      }, 100)
    },
    openDeatailSearchDialog() {
      this.$refs.detailSearch.visible = true
    },
    // 接受子组件返回参数
    updateParam(queryParam) {
      this.queryParam = queryParam
    },
    // 项目级别多选框
    doQueryConcatProjectLevel(data) {
      if (data.length > 0) {
        this.queryParam.qry_projectlevel = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_projectlevel = null
      }
    },
    // 部门名称多选框
    doQueryConcatCreateDepart(data) {
      if (data.length > 0) {
        this.queryParam.qry_deptcommoncode = data
          .map((item) => {
            return "'" + item + "'"
          })
          .join(',')
      } else {
        this.queryParam.qry_deptcommoncode = null
      }
    },
    /** 执行查询 */
    doQuery() {
      this.loadData({ currentPage: 1 })
    },
    // 重置查询条件(子组件调用)
    resetQueryForDetailSearch() {
      this.queryParam = {}
      this.param = {}
      this.projectlevel = []
      this.createdepart = []
      this.doQuery()
    },
    // 重置查询条件(页面重置按钮使用)
    resetQuery() {
      this.queryParam = {}
      this.param = {}
      this.projectlevel = []
      this.createdepart = []
      this.$refs.detailSearch.resetQueryParam()
      this.doQuery()
    },
    /** 获取查询参数 */
    getQueryParams() {
      let param = {}
      if (this.$route.query.level !== undefined && this.$route.query.level !== null) {
        this.projectlevelList[0] = this.$route.query.level
      }
      if (this.$route.query.abnormalstate !== undefined && this.$route.query.abnormalstate !== null) {
        this.queryParam.qry_abnormalstate = this.$route.query.abnormalstate
      }
      if (this.$route.query.projectstate !== undefined && this.$route.query.projectstate !== null) {
        this.queryParam.qry_projectstate = this.$route.query.projectstate
      }
      if (this.projectlevelList) {
        param.query_projectlevel = this.projectlevelList.join(',')
      }
      // if (this.createdepart) {
      //   param.query_createdepart = this.createdepart.join(',')
      // }
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
      }
      if (this.urlParam.length !== 0) {
        this.urlParam = window.location.search
      }
      Object.assign(param, this.queryParam, this.sorterInfo, this.filtersInfo)
      // if (this.urlParam !== '?' && this.urlParam.length > 0) {
      //   //  如果首页跳转参数不为空,那么根据首页参数查询
      //   var projectlevel = this.urlParam.substr(1)
      //   param.qry_abnormalstate = projectlevel
      //   //  清除首页参数
      //   this.urlParam = ''
      // } else if (this.urlParam.length !== 0 && this.urlParam.length === 0) {
      //   param.qry_abnormalstate = ''
      // }
      // 销售项目状态大类筛选
      param.qry_projectlargestate = validateNull(this.projectlargestate) ? '0,1,2,3' : this.projectlargestate.join(',')
      param.currentPage = this.pageInfo.currentPage
      param.pageSize = this.pageInfo.pageSize
      return filterObjectNull(param)
    },
    // 禁用表格前面的选择
    doDisableCheckBox(row, index) {
      if (row.state !== 0 && row.state !== 2) {
        return false
      } else {
        return true
      }
    },
    /** 列表数据加载开始 */
    loadData(paramMap) {
      // 得到加载分页
      if (validateNull(paramMap) === false && Object.keys(paramMap).indexOf('currentPage') > -1) {
        this.pageInfo.currentPage = paramMap['currentPage']
      }
      if (!this.beforeLoadData()) return
      // 查询条件
      var params = this.getQueryParams()
      // 数据查询
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            res.result.dataList.forEach((element) => {
              if (element.chanceclue.indexOf(',') > 0) {
                // 如果有多个机会点，则换行展示
                let chancleArray = element.chanceclue.split(',')
                this.$set(element, 'chanceclueList', chancleArray)
              } else {
                let tArray = [element.chanceclue]
                this.$set(element, 'chanceclueList', tArray)
              }
            })
            this.datas = res.result.dataList
            this.pageInfo.totalCount = res.result.totalCount
            // 初始化自定义列
            if (typeof this.$refs.toolbar !== 'undefined') {
              this.$refs.toolbar.doInitTableColumn()
            }
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.afterLoadData()
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    // 行颜色
    tableRowStyle(row, index) {
      if (row.row.abnormalstate === 30) {
        // 里程碑及任务超期
        return { 'background-color': 'rgb(235,75,75)', color: 'white' }
      } else if (row.row.abnormalstate === 20) {
        // 项目超期
        return { 'background-color': 'rgb(255,140,46)', color: 'white' }
      } else if (row.row.abnormalstate === 10) {
        // 任务超期
        return { 'background-color': 'rgb(184,134,11)', color: 'white' }
      } else if (row.row.abnormalstate === 15) {
        // 流程超期
        return { 'background-color': '#0000FF', color: 'white' }
      }
    },
    // 双击打开项目追踪页面
    doRowDbClick(row, column, event) {
      // 如果项目未完成立项审批，则双击跳转到立项页面
      if (row.state === 0 || row.state === 2) {
        this.openEditDialog('editForm', row.id)
      } else if (row.state === 1) {
        this.openViewDialog('editForm', row.id)
      } else {
        // 审批完成跳转到详情页
        this.projectcode = row.projectcode
        this.$nextTick(() => {
          this.$refs.indexComp.id = row.id
          this.$refs.indexComp.visible = true
        })
      }
    },
    /** 打开评论对话框实现 */
    openCommentDialog(editForm, rowData) {
      this.$refs[editForm].isAdd = true
      this.$refs[editForm].visible = true
      this.$refs[editForm].disableEditSubmit = false
      this.$refs[editForm].parentModel = rowData
    },
    expandChange(row, expandedRows) {
      getAction(this.url.queryTaskForSystem, { projectcode: row.projectcode, needsupport: this.queryParam.qry_needsupport })
        .then((res) => {
          if (res.success) {
            let indexRow = row.rowno - (this.pageInfo.currentPage - 1) * this.pageInfo.pageSize - 1
            this.$set(this.datas[indexRow], 'customertask', res.result)
          }
        })
        .catch((err) => {
          this.$tap.alert('加载任务信息出错，请联系管理员！')
        })
    },
    doChangeRowClassName({ row, rowIndex }) {
      if (row.disabledexpand) {
        return 'row-expand-cover'
      }
    },
    afterLoadData() {
      this.expands = []
    },
    projectMark(id, type) {
      let params = {
        sourcetype: 'MpmProject',
        sourceid: id,
        operatetype: 'mark',
        usercode: this.user.code,
        type: type
      }
      if (type === '1') {
        for (var i = 0; i < this.datas.length; i++) {
          if (this.datas[i].id === id) {
            this.datas[i].markflag = '1'
            break
          }
        }
      } else {
        for (i = 0; i < this.datas.length; i++) {
          if (this.datas[i].id === id) {
            this.datas[i].markflag = '0'
            break
          }
        }
      }
      postAction(this.url.changeOperateMarkState, params).then((res) => {
        if (res.success) {
          if (type === '1') {
            this.$tap.alert('关注成功！')
          } else if (type === '2') {
            this.$tap.alert('取消关注成功！')
          }
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      })
    },
    queryCanWatch() {
      getAction(this.url.queryCanWatch).then((res) => {
        if (res.success) {
          this.canWatch = res.result.canwatch
          this.whetherpmo = res.result.whetherpmo
          this.deptcommcodes = res.result.deptcommcodes
        } else {
          this.canWatch = false
          this.whetherpmo = false
          this.deptcommcodes = ''
        }
      })
    },
    supervisecolor(e) {
      if (e === '超期' || e === '延期响应' || e === '未响应') {
        return 'warning'
      } else if (e === '按时响应' || e === '已完成') {
        return 'success'
      } else if (e === '进行中') {
        return 'primary'
      }
    },
    openChangeManager() {
      this.openAddDialog('projectChangeManager')
    },
    isCFO() {
      const param = {
        usercode: this.user.code
      }
      getAction(this.url.isCFO, param).then((res) => {
        if (res.success) {
          if (res.result) {
            this.isCFOForThisProject = true
          }
        } else {
          this.$tap.alert('用户职位未获取成功，请联系管理员')
        }
      })
    }
  },
  mounted() {
    const resizeOb = new ResizeObserver((entries) => {
      const tableEl = entries[0].target
      this.tableWidth = tableEl.clientWidth - 90 + 'px'
    })
    resizeOb.observe(this.$refs.mainTable.$el)
    this.$once('hook:beforeDestroy', () => {
      resizeOb.disconnect()
    })
  },
  created() {
    // 判断用户是否为国网、南网或经营管理部PMO，可以进行关注与留言
    this.queryCanWatch()
    // 判断是否为省区财经副总
    this.isCFO()
  }
}
</script>
<style scoped lang="scss">
.app-main {
  height: 100%;
}
/deep/ .el-table tbody tr.current-row > td {
  background: #ADD8E6 !important;
   .cell {
    color: #161112 !important;
  }
}
/deep/ .el-table__body .el-table__row.hover-row td {
  background-color: transparent !important;
}
.app-container {
  height: 100%;
  padding: 10px;
  margin: 12px;
  background: white;
  border-radius: 5px;
}
::v-deep .el-table .row-expand-cover .cell .el-table__expand-icon {
  display: none;
}
.superviser {
  display: flex;
}
.superviserButton {
  margin-left: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 22px;
}
div.superviser:hover,
div.superviser:active {
  text-decoration: underline;
}
.description-col-text {
  margin-right: 8px;
  height: 20px !important;
  width: 20px !important;
  margin-left: 1px;
}
$project_over_color: #d80a1e;
$milepost_over_color: #ff8c2e;
$flow_over_color: #0000ff;
$task_over_color: #b8860b;
.project-over-color {
  @extend .description-col-text;
  background-color: $project_over_color;
}
.milepost-over-color {
  @extend .description-col-text;
  background-color: $milepost_over_color;
}
.flow-over-color {
  @extend .description-col-text;
  background-color: $flow_over_color;
}
.task-over-color {
  @extend .description-col-text;
  background-color: $task_over_color;
}
.third- col {
  margin-left: 12px !important;
}
</style>
